<script>
import store from "../../store/index.js";
import MarkdownIt from "markdown-it";
import request from "../../utils/Request.js";

export default {
  name: "Message",
  data() {
    return {
      activeName: 'private',
      markdown: new MarkdownIt(),
      msgLoading: true
    }
  },
  computed: {
    store() {
      return store
    },
    hasPrivate() {
      for (let msg of store.state.privateMessages) {
        if (msg.isRead === false)
          return true
      }
      return false
    },
    hasNotify() {
      for (let msg of store.state.notifyMessages) {
        if (msg.isRead === false)
          return true
      }
      return false
    },
    hasInvite() {
      for (let msg of store.state.inviteMessages) {
        if (msg.isRead === false)
          return true
      }
      return false
    }
  },
  methods: {
    readMsg(msg, index) {
      if (!msg.isRead) {
        request({
          url: '/api/message/message/read/' + (this.activeName === 'notify' ? 'broadcast' : 'user'),
          method: 'get',
          params: {
            msgId: msg.id
          }
        })

        if (this.activeName === 'private') {
          store.state.privateMessages[index].isRead = true
        } else if (this.activeName === 'notify') {
          store.state.notifyMessages[index].isRead = true
        } else if (this.activeName === 'invite') {
          store.state.inviteMessages[index].isRead = true
        }

        store.state.msgCount--;
      }
    },
    openMsg(msg, index) {

      this.readMsg(msg, index)

      store.state.readMessageDialogVisible = true
      store.state.readMessage = msg
    },
    removeMarkdown(markdownText) {
      const html = this.markdown.render(markdownText);
      return html.replace(/<[^>]+>/g, '');
    },
    getMsg(name) {
      request({
        url: '/api/message/message/get/' + name,
        method: 'get'
      })
          .then(resp => {
            let data = resp.data;
            if (data.code === 0) {
              if (name === 'private') {
                store.state.privateMessages = data.data
              } else if (name === 'invite') {
                store.state.inviteMessages = data.data
              } else {
                store.state.notifyMessages = data.data
              }
            }
          })
    },

    /**
     * 接受按钮
     * @param msg
     * @param index
     */
    acceptInvite(msg, index) {
      request({
        url: '/api/project/project/member/accept',
        method: 'get',
        params: {
          msgId: msg.id,
        }
      })
          .then(resp => {
            let data = resp.data
            if (data.code === 0) {
              store.state.inviteMessages[index].isRead = true
              store.state.msgCount--
            }
          })
    },

    /**
     * 拒绝按钮
     * @param msg
     * @param index
     */
    rejectInvite(msg, index) {
      request({
        url: '/api/project/project/member/reject',
        method: 'get',
        params: {
          msgId: msg.id,
        }
      })
          .then(resp => {
            let data = resp.data
            if (data.code === 0) {
              store.state.inviteMessages[index].isRead = true
              store.state.msgCount--
            }
          })
    }

  },
  created() {
    // 加载私信信息
    this.getMsg('private')
    this.getMsg('notify')
    this.getMsg('invite')
  }
}
</script>

<template>

  <div class="outer">
    <el-tabs v-model="activeName">

      <el-tab-pane name="private">
        <template #label>
            <span class="fs-17 color-#757575 w-96 text-center">
             <el-badge is-dot :hidden="!hasPrivate">私信</el-badge>
            </span>
        </template>

        <span v-for="(msg, index) in store.state.privateMessages">
          <el-link size="large" @click="openMsg(msg, index)">
            <span v-if="!msg.isRead"
                  style="font-style: italic; text-decoration: underline">(未读)&nbsp;</span>{{ msg.title }}
          </el-link>
          <br/>
          <el-text type="info" truncated>
            {{ removeMarkdown(msg.content) }}
          </el-text>
          <el-divider/>
        </span>

      </el-tab-pane>

      <el-tab-pane name="notify" lazy>
        <template #label>
            <span class="fs-17 color-#757575 w-96 text-center">
             <el-badge is-dot :hidden="!hasNotify">通知</el-badge>
            </span>
        </template>
        <span v-for="(msg, index) in store.state.notifyMessages">
          <el-link size="large" @click="openMsg(msg, index)">
            <span v-if="!msg.isRead"
                  style="font-style: italic; text-decoration: underline">(未读)&nbsp;</span>{{ msg.title }}
          </el-link>
          <br/>
          <el-text type="info" truncated>
            {{ removeMarkdown(msg.content) }}
          </el-text>
          <el-divider/>
        </span>
      </el-tab-pane>

      <el-tab-pane name="invite" lazy>
        <template #label>
            <span class="fs-17 color-#757575 w-96 text-center">
              <el-badge is-dot :hidden="!hasInvite">邀请</el-badge>
            </span>
        </template>
        <span v-for="(msg, index) in store.state.inviteMessages">
          <el-text size="large">
            {{ msg.title }}
          </el-text>
          <br/>
          <el-row>
            <el-col :span="18">
              <el-text type="info" truncated>
                {{ msg.content }}
              </el-text>
            </el-col>
            <el-col :span="6" v-if="!msg.isRead">
              <el-button plain type="primary" @click="acceptInvite(msg, index)">
                接受
              </el-button>
               <el-button plain type="danger" @click="rejectInvite(msg, index)">
                拒绝
              </el-button>
              <el-button plain type="info" @click="readMsg(msg, index)">
                忽略
              </el-button>
            </el-col>
            <el-col v-else :span="6">
              <el-text type="info">已处理</el-text>
            </el-col>
          </el-row>

          <el-divider/>
        </span>
      </el-tab-pane>
    </el-tabs>
  </div>

</template>

<style scoped>

.outer {
  display: block;
  position: absolute;
  left: 50%;
  top: 10%;
  transform: translate(-50%);
  width: 60%;
}

</style>